<template>
	<view class="main">
		<view class="flex-between">
			<view style="font-size: 36upx;font-weight: bold;padding-left: 4upx;border-left: 10upx solid var(--theme-color);">用车</view>
			<view class="flex-align">
				<van-icon color="var(--theme-color)" name="clock-o" />
				<label style="margin-left: 4upx;" v-text="showOrderNum?'订单号123456498':'用车时间:2020.02.30 10:30'"></label>
			</view>
		</view>
		<view class="main-location">
			<view class="flex-align">
				<round-node size="10rpx" background="red"></round-node>
				<view  style="margin-left: 32upx;">
					<view class="main-title ellipsis" style="width: 364upx;">成都金牛万达广场</view>
					<view>张三 15684513541</view>
				</view>
			</view>
			<van-divider hairline />
			<view class="flex-align">
				<round-node size="10rpx" background="#333333"></round-node>
				<view  style="margin-left: 32upx;">
					<view class="main-title ellipsis" style="width: 364upx;">春熙路-地铁站-西南侧（春熙路).</view>
					<view>张三 15684513541</view>
				</view>
			</view>
		</view>
		<van-field label="用车类型" readonly value="货车" ></van-field>
		<van-field label="用车数量" readonly value="2" ></van-field>
		<van-field label="车辆载重" readonly value="2吨" ></van-field>
		<van-field label="到货时间" readonly value="2021-8-17" ></van-field>
		<van-field label="运输货物" readonly value="衣服" ></van-field>
		<view style="margin-top: 20upx;">
			<view class="main-title">保险信息</view>
			<view class="flex-column-between" style="margin-top: 20upx;height: 88upx;">
				<label style="white-space: nowrap;">保险公司：平安保险</label>	
				<label style="white-space: nowrap;">保险单号：11345498413</label>
			</view>
		</view>
		<view style="margin-top: 20upx;">
			<view class="main-title">订单价格</view>
			<view class="flex-between" style="margin: 20upx 0upx;">
				<view class="flex-align">
					<label style="color: #333333;">运输价格：</label>
					<label class="main-price">￥120.00</label>
				</view>
				<view class="flex-align">
					<label style="color: #333333;">信息费：</label>
					<label class="main-price">￥100.00</label>
				</view>
			</view>
			<view class="flex-align">
				<label style="color: #333333;">保险费用：</label>
				<label class="main-price">￥100.00</label>
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	import roundNode from '@/components/roundNode/roundNode.vue'
	export default{
		props:{
			showOrderNum:{
				type:Boolean,
				default:false
			}
		},
		components:{
			roundNode
		},
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		background-color: #FFFFFF;
		font-size: 24upx;
		font-weight: 500;
		color: #333333;
		width: calc(100%-96upx);
		padding: 48upx;
		border-radius: 10upx;
		.main-title{
			font-size: 28upx;
			font-weight: bold;
			color: #333333;
		}
		.main-location{
			width: 490upx;
			margin: 40upx auto;
			background: #F7F7F7;
			border-radius: 20upx;
			padding: 18upx 50upx;
		}
		.main-price{
			font-size: 24upx;
			font-weight: bold;
			color: #FF4747;
		}
	}
</style>
